<template>
  <div class="preview_user">
    <div class="cover-box"
      :style="{
        backgroundImage: `url(${baseInfo.cover_ur || defaultConfig.USER_COVER_URL})`
      }"
    >

      <div class="user-att-box flex">
        <div class="left-box user-avatar"
          :style="{
            backgroundImage: `url(${baseInfo.avatar_url || defaultConfig.AVATAR_URL})`
          }"
        ></div>
        <div class="right-box">
          <div class="user-name">{{baseInfo.nickname}}</div>
          <div class="user-email" :title="baseInfo.email">{{baseInfo.email}}</div>
        </div>
      </div>
    </div>

    <div class="conatiner flex">
      <div class="info-box">
        <div class="top-box">gender</div>
        <div class="bottom-box"
          :style="{
            backgroundImage: `url(${baseInfo.gender == '1' ? defaultConfig.GENDER_URL.male : defaultConfig.GENDER_URL.female})`
          }"
        >
        </div>
      </div>
      <div class="info-box">
        <div class="top-box">motto</div>
        <div class="bottom-box">{{baseInfo.motto}}</div>
      </div>
    </div>

    <h3>代表文章</h3>
    <div class="user-article-box flex">
      <div class="user-article"  v-for="article of articles" :key="article.id"
      :style="{
        backgroundImage: `url(${article.cover_url || defaultConfig.ARTICLE_COVER})`
      }">
        <div class="title">{{article.headline}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getBaseInfo} from '__SERVICE__/user.js'
import defaultConfig from '__CONFIG__/base-config.js'
export default {
  name: 'PreviewUser',
  data: ()=>({
    baseInfo: {},
    articles: []
  }),
  computed: {
    aliveUserInfo() {
      return this.$store.state.user.aliveUserInfo
    }
  },
  created() {
    this.defaultConfig = defaultConfig
    this.bandBaseInfo()
  },
  methods: {
    async getBaseInfo(vertify) {
      try {
        const result = await getBaseInfo(vertify)
        const {data: {user}} = result
        const {avatar_url, nickname, motto, email, cover_url, gender, article_models} = user
        console.log(article_models)
        this.articles = article_models
        this.baseInfo = Object.freeze({avatar_url, nickname, motto, email, cover_url, gender})
      }catch(e) {
        this.$Notice.error({
          title: '权限错误',
          desc: '您没有权限访问该页面，请输入正确路径或者登入！！，三秒后自动跳转',
          duration: 3000
        })
        this.$router.push({name: 'Mine'})
        console.log(e)
      }
    },
    //绑定数据
    bandBaseInfo() {
      this.getBaseInfo(this.getVertify())
    },
    //获取验证字段 考虑是否有字段，如果没有，那么是否登入
    getVertify() {
      const { vertify } = this.$route.query
      if(vertify) return vertify
      else if(this.aliveUserInfo) return this.aliveUserInfo.nickname
      else return null
    }
  },
  watch: {
    '$route': function(){

    }
  }
}
</script>

<style lang="less">
  @import url('__CSS__/preview_user/preview_user.less');
</style>